<template>
	<div class="layout-pd">
		<zh-space>
			<zh-card title="">
				<zh-form ref="userQueryForm" :model="state.queryParam">
					<zh-form-input prop="userName" label="用户名" placeholder="精确查询" v-model="state.queryParam.userName"></zh-form-input>
					<zh-form-input prop="fullName" label="姓名" placeholder="支持模糊查询" v-model="state.queryParam.fullName"></zh-form-input>
					<template v-if="state.advanced">
						<zh-form-select label="设备类型" :options="state.dictData.equipmentType" v-model="state.queryParam.equipmentType"></zh-form-select>
						<zh-form-date
							prop="loginTimeBeg"
							label="开始时间"
							type="datetime"
							@change="onLoginTimeChange"
							v-model="state.queryParam.loginTimeBeg"
							placeholder="请输入登入开始时间"
						></zh-form-date>
						<zh-form-date
							prop="loginTimeEnd"
							label="结束时间"
							type="datetime"
							v-model="state.queryParam.loginTimeEnd"
							:disabled-date="disabledDate"
							placeholder="请输入登入结束时间"
						></zh-form-date>
						<zh-form-select
							prop="loginType"
							label="登入类型"
							:options="state.dictData.loginType"
							v-model="state.queryParam.loginType"
						></zh-form-select>
					</template>
					<zh-form-query v-model="state.advanced" :form-ref="userQueryForm" :table-ref="userListTable"></zh-form-query>
				</zh-form>
			</zh-card>
			<zh-table
				ref="userListTable"
				title="用户列表"
				:height="600"
				:url="state.url"
				:columns="state.tableColumn"
				:radio-config="{ trigger: 'row' }"
				:disabled="false"
				highlight-current-row
			>
				<template #operate="{ row }">
					<el-button type="danger" @click="kickOut(row.accessToken)"> 踢出 </el-button>
				</template>
			</zh-table>
		</zh-space>
	</div>
</template>

<script lang="ts" setup name="UserOnline">
import moment from 'moment';
//------------------定义子组件---------------------------
const userQueryForm = ref<any>({});
const userListTable = ref<any>({});

//------------------内部变量定义-------------------------
const state = reactive({
	description: '在线用户',
	dictData: {} as any,
	form: null,
	// 高级搜索 展开/关闭
	advanced: false,
	// 查询参数
	queryParam: {
		userName: undefined,
		fullName: undefined,
		equipmentType: undefined,
		loginTimeBeg: undefined,
		loginTimeEnd: undefined,
		loginType: undefined,
	} as any,
	url: $api.system.getOnlineList.url,
	// 表头
	tableColumn: [
		{ type: 'seq', width: 80, fixed: 'left', align: 'center', title: '序号' },
		{ field: 'loginId', title: '登入Id', visible: false, fixed: 'left', align: 'center', width: 150 },
		{ field: 'userId', title: '用户Id', visible: false, align: 'center', fixed: 'left', width: 150 },
		{ field: 'userName', title: '用户名', align: 'center', fixed: 'left', width: 150 },
		{ field: 'fullName', title: '姓名', align: 'center', width: 200 },
		{ field: 'accessToken', title: '登入TOKEN', align: 'center', width: 250 },
		{ field: 'loginTime', title: '登入时间', align: 'center', width: 200 },
		{ field: 'loginIp', title: '登入IP', align: 'center', width: 150 },
		{ field: 'loginHost', title: '登入host', align: 'center', width: 150 },
		{ field: 'loginKey', title: '登入KEY', align: 'center', width: 250 },
		{ field: 'loginType', title: '登入类型', visible: false, align: 'center', width: 100 },
		{ field: 'loginTypeName', title: '登入类型', align: 'center', width: 250 },
		{ field: 'equipmentType', title: '登入设备类型', visible: false, align: 'center', width: 100 },
		{ field: 'equipmentTypeName', title: '登入设备类型', align: 'center', width: 250 },
		{ field: 'openId', title: '第三方登入ID', align: 'center', width: 200 },
		{ field: 'equipmentId', title: '登入设备ID', align: 'center', width: 200 },
		{ field: 'browser', title: '浏览器类型', align: 'center', width: 150 },
		{
			field: 'action',
			title: '操作',
			align: 'center',
			showOverflow: true,
			width: 80,
			fixed: 'right',
			slots: { default: 'operate' },
		},
	],
});
//------------------定义调用方法-------------------------
function disabledDate(time) {
	if (state.queryParam.loginTimeBeg) {
		return moment(time).format('YYYY-MM-DD') < moment(state.queryParam.loginTimeBeg).format('YYYY-MM-DD');
	} else {
		return false;
	}
}
function onLoginTimeChange() {
	state.queryParam.loginTimeEnd = undefined;
}
function kickOut(accessToken) {
	setTimeout(() => {
		const params = {
			token: accessToken,
		};
		$http
			.post($api.system.kickOutUser.url, params)
			.then(() => {
				$messageBox.success('成功踢出', '成功提示');
				setTimeout(() => {
					userListTable.value.query(state.queryParam);
				}, 1000);
			})
			.catch(() => {});
	}, 20);
}

//------------------初始化------------------------------
const params = {
	dictFields: 'equipmentType,loginType',
};
$http.post($api.system.getBatchDict.url, params).then((res) => {
	state.dictData = res.result;
});
</script>
